<template>
  <div>
    <div class="tableContent" ref="tableContainerRef">
      <a-table
        :dataSource="tableData"
        :columns="columns"
        size="small"
        :pagination="false"
        :loading="tableLoading"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'edit'">
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
          </template>
        </template>
      </a-table>
    </div>

    <AddTemplateConfig
      :addTemplateConfigVisible="modalVisible"
      :isEdit="isEdit"
      :rowData="rowData"
      @update:addTemplateConfigVisible="modalVisible = $event"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup>
// 
import { FormOutlined, PlusOutlined } from "@ant-design/icons-vue"
import { Empty } from 'ant-design-vue'

import { cloneDeep } from "lodash-es"
import AddTemplateConfig from "./AddTemplateConfig.vue"
import { FAULT_REGISTRATION_TYPE_OBJ } from "@/constants/faultRegistration.js"
const $api = inject("$api")
const props = defineProps({
  nowTab: {
    type: Number,
    default: null,
  },
})
const nowTab = ref(null)
watch(
  () => props.nowTab,
  (val) => {
    if (val) {
      nowTab.value = val
    }
  },
  {
    immediate: true,
  }
)

const tableData = ref([])
const tableLoading = ref(false)
const getTableData = async () => {
  tableLoading.value = true
  let params = {
    configType: nowTab.value,
  }
  let res = await $api.faultConfigList(params)
  if (res && res.code === 0) {
    tableData.value = res.data
  }
  tableLoading.value = false
}

onMounted(async () => {
  getTableData()
})

const modalVisible = ref(false)

const columns = ref([
  {
    title: "操作类型",

    align: "center",
    width: "25%",
    customRender: ({ record }) => {
      return record.type ? FAULT_REGISTRATION_TYPE_OBJ[record.type] : ""
    },
  },
  {
    title: "操作日志模板",
    dataIndex: "operateTemplate",
    key: "operateTemplate",
    align: "center",
    width: "60%",
  },

  {
    title: "操作",
    dataIndex: "edit",
    key: "edit",
    align: "center",
    width: "15%",
  },
])
/* const customHeaderCell = (column) => {
  console.log(222, column)
  if (column.key === "delete" || column.key === "edit") {
    return {
      style: { padding: 0 }, // 自定义样式
    }
  }
  return {} // 返回空对象表示使用默认样式
} */
const addData = () => {
  isEdit.value = false
  modalVisible.value = true
}

const handleSuccess = async (data) => {
  let res = isEdit.value
    ? await $api.faultConfig({ configType: nowTab.value, ...data })
    : await $api.faultConfigPost({ configType: nowTab.value, ...data })
  if (res && res.code === 0) {
    getTableData()
    message.success("操作成功")
  }
}
const isEdit = ref(false)
const rowData = ref({})
const handleEdit = (record) => {
  isEdit.value = true
  rowData.value = record
  modalVisible.value = true
}

const handleDelete = async (record) => {
  // 实现删除功能
  let res = await $api.faultConfigDel({ id: record.id })
  if (res && res.code === 0) {
    getTableData()
    message.success("操作成功")
  }
}
</script>
<style></style>
